<template>
  <div class='student-detail'>

    <Head :title="title" :btns="btns" style="margin-top:20px;"></Head>
    <div class="student-base-info">
      <div class="img-box fl pr">
        <!-- <img :src="imgs.defaultImg" class="pa" alt=""> -->
        <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :disabled="noEditing">
          <img v-if="search.head" :src="imageUrl||search.head" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="base-info">
        <BaseInfo :searchData="searchData" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
    </div>
    <div class="other-info">
      <ul class="head">
        <li v-for="item in headData" :class="{active:item.isactive}">
          <a :href="item.url" @click="gotoHere(item)">{{item.label}}</a>
        </li>
      </ul>
    </div>
    <!-- 锚点数据 -->
    <div class="real-info" @scroll="scrollThis">
      <p class="title" id="info_1"><span>基本信息</span></p>
      <div>
        <BaseInfo :searchData="baseInfoData" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
      <p class="title" id="info_2"><span>技能证书</span></p>
      <div class="special">
        <BaseInfo :searchData="baseInfoData2" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
      <p class="title" id="info_3"><span>荣获奖学金</span></p>
      <div>
        <BaseInfo :searchData="baseInfoData3" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
      <p class="title" id="info_4"><span>困难类型</span></p>
      <div>
        <BaseInfo :searchData="baseInfoData4" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
      <p class="title" id="info_5"><span>贫困情况和助学金</span></p>
      <div>
        <BaseInfo :searchData="baseInfoData5" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
      <p class="title" id="info_6"><span>荣誉称号</span></p>
      <div>
        <BaseInfo :searchData="baseInfoData6" :search="search" :canEdit="noEditing" :class="{wd100:true}"></BaseInfo>
      </div>
      <p class="title" id="info_7"><span>党员发展</span></p>
      <div>
        <BaseInfo :searchData="baseInfoData7" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
      <p class="title" id="info_8"><span>联系人信息</span></p>
      <div>
        <BaseInfo :searchData="baseInfoData8" :search="search" :canEdit="noEditing"></BaseInfo>
      </div>
      <p class="title" id="info_9" style="visibility: hidden;"><span>联系人信息</span></p>
    </div>
  </div>
</template>
<script>
import Head from "../common/tableHead";
import BaseInfo from "../common/searchContent";
import { nation } from "../../../static/selectData.js";
export default {
  components: { Head, BaseInfo },
  name: "",
  data() {
    return {
      noEditing: true, //是否编辑
      btns: "2-5", //2-5 详情  2-6 添加
      title: "学生详细信息",
      imgs: {
        defaultImg: require("../../assets/img/person.png")
      },
      actionUrl:PATH + "upload/uploadImg",

      firstData: {}, //详情初始数据
      path: "",

      headData: [
        { label: "全部信息", isactive: false, url: "#info_1" },
        { label: "基本信息", isactive: true, url: "#info_1" },
        { label: "技能证书", isactive: false, url: "#info_2" },
        { label: "荣获奖学金", isactive: false, url: "#info_3" },
        { label: "困难类型", isactive: false, url: "#info_4" },
        { label: "贫困情况和助学金", isactive: false, url: "#info_5" },
        { label: "荣誉称号", isactive: false, url: "#info_6" },
        { label: "党员发展", isactive: false, url: "#info_7" },
        { label: "联系人信息", isactive: false, url: "#info_8" },
      ],

      search: {
        head:"",
      },
      searchData: [
        { name: "姓名", key: "name", type: "input" },
        { name:'学生状态',key:'sta',type: "select",array:["男","女"] },
        { name: "性别",key:"sex",type: "select",array:["男","女"]},
        { name: "学院", key: "college", type: "input" },
        {
          name: "学生类型",
          key: "type",
          type: "select",
          array: ["研究生", "本科"]
        },
        { name: "专业", key: "specialty", type: "input" },
        { name: "班级", key: "grade", type: "input" },
        { name: "学号", key: "number", type: "input" },
        { name: "身份证号", key: "identitycard", type: "input" },
        { name: "联系电话", key: "tel", type: "input" },
        { name: "QQ", key: "qq", type: "input" }
      ],
      baseInfoData: [
        { name: "出生年月", key: "birth", type: "input" },
        { name: "政治面貌", key: "status", type: "input" },
        { name: "民族", key: "nation", type: "select", array: nation },
        { name: "任职", key: "position", type: "input" },
        // { name: "任职期间", key: "position_time", type: "input",placeholder:"xxxx-xx-xx,xxxx-xx-xx",check:true,checkMethods:/^(\d{4})-(\d{1,2})-(\d{1,2})(，|,)(\d{4})-(\d{1,2})-(\d{1,2})$/},
        { name: "住宿楼栋", key: "dormitory", type: "input" },
        { name: "宿舍号", key: "dormitory_number", type: "input" },
        { name: "本科学校", key: "school", type: "input" },
        { name: "导师", key: "teacher", type: "input" },
        { name: "生源地区", key: "studentsin", type: "input" },
        { name: "毕业中学", key: "middleschool", type: "input" },
        { name: "工行联名卡号", key: "bankcard", type: "input" },
        { name: "微信", key: "weixin", type: "input" },
        { name: "邮箱", key: "mail", type: "input" },
        { name: "家庭详细地址", key: "address", type: "input" },
        { name: "家庭邮政编码", key: "postal", type: "input" }
      ],
      baseInfoData2: [
        { name: "CET4", key: "cet4", type: "input" },
        { name: "CET6", key: "cet6", type: "input" },
        { name: "计算机过级情况", key: "computers", type: "input" }
      ],
      baseInfoData3: [
        { name: "国家奖学金", key: "scholarship_state", type: "input" },
        { name: "卓越奖学金", key: "scholarship_remarkable", type: "input" },
        {
          name: "国家励志奖学金",
          key: "scholarship_inspirational",
          type: "input"
        },
        { name: "学校奖学金", key: "scholarship_school", type: "input" },
        { name: "社会奖学金", key: "scholarship_society", type: "input" }
      ],
      baseInfoData4: [
        { name: "学习困难", key: "difficulty_study", type: "input" },
        { name: "家庭重大变故", key: "difficulty_family", type: "input" },
        { name: "经济困难", key: "difficulty_economics", type: "input" },
        { name: "沉溺网络", key: "difficulty_network", type: "input" }
      ],
      baseInfoData5: [
        { name: "贫困等级", key: "difficulty_class", type: "input" },
        { name: "国家一等助学金", key: "subsidies_first", type: "input" },
        { name: "国家二等助学金", key: "subsidies_second", type: "input" },
        { name: "国家三等助学金", key: "subsidies_third", type: "input" },
        { name: "社会助学金", key: "subsidies_society", type: "input" }
      ], 
      baseInfoData6: [

        { name: "荣誉称号", key: "honorary", type: "input" },
        // { name: "校三好学生标兵", key: "excellent_pacesetter", type: "input" },
        // { name: "校三好学生", key: "excellent_school_student", type: "input" },
        // {
        //   name: "校优秀学生干部",
        //   key: "excellent_school_cadre",
        //   type: "input"
        // },
        // { name: "院三好学生", key: "excellent_faculty_student", type: "input" },
        // {
        //   name: "院优秀学生干部",
        //   key: "excellent_faculty_cadre",
        //   type: "input"
        // },
        // { name: "优秀毕业生", key: "excellent_graduate", type: "input" }
      ],
      baseInfoData7: [
        { name: "是否入党", key: "party", type: "select", array: ["是", "否"] },
        { name: "入党时间", key: "party_time", type: "input" },
        { name: "是否转正", key: "official", type: "input" },
        { name: "转正时间", key: "official_time", type: "input" },
        { name: "是否团员推优", key: "party_excellent", type: "input" },
        { name: "团员推优时间", key: "party_excellent_time", type: "input" },
        { name: "上否上过党校", key: "partyschool", type: "input" },
        { name: "上党校时间", key: "partyschool_time", type: "input" }
      ],
      baseInfoData8: [
        { name: "父亲姓名", key: "father", type: "input" },
        { name: "父亲工作单位", key: "father_unit", type: "input" },
        { name: "父亲联系电话", key: "father_tel", type: "input" },
        { name: "母亲姓名", key: "mother", type: "input" },
        { name: "母亲工作单位", key: "mother_unit", type: "input" },
        { name: "母亲联系电话", key: "mother_tel", type: "input" }
      ]
    };
  },
  methods: {
    showThis(item) {
      this.headData.forEach(ele => {
        ele.isactive = false;
      });
      this.$set(item, "isactive", true);
    },
    getDetail() {
      _g.apiPost("studentinfo/find", this.search).then(res => {
        if(res.data.position_time)res.data.position_time=res.data.position_time.join(",")
        this.firstData = JSON.parse(JSON.stringify(res.data));
        this.search = res.data;
      });
    },
    save() {
      var params=JSON.parse(JSON.stringify(this.search))
      // params.position_time=params.position_time.indexOf(",")>-1?params.position_time.split(","):params.position_time.split("，")
      // console.log(params.position_time)
      // if(params.position_time[0]==""){
      //   _g.toastMsg("warning", "任职期间不能为空");
      //   return
      // }
      this.apiPost("studentinfo/save", params,true).then(res => {
        _g.toastMsg(res.error ? "error" : "success", res.msg);
        this.noEditing = false;
        this.btns = "2-5";
      });
    },
    delete() {
      _g.apiPost("studentinfo/del", this.search).then(res => {
        _g.toastMsg(res.error ? "error" : "success", res.msg);
        if (!res.error) this.$router.go(-1);
        this.$store.state.dia.confirm.show = false;
      });
    },

    handleAvatarSuccess(file) {
      this.imageUrl=file.msg
      this.search.head=file.msg
    },
    beforeAvatarUpload() {},

    // 锚点跳转
    gotoHere(item){
      // this.showThis(item)
      event.preventDefault()
      var divA=$(item.url).prevAll("div")||[]
      var pA=$(item.url).prevAll("p")||[]
      var divHeight=0
      var pLength=0
      for(var i=0;i<divA.length;i++){
        divHeight+=divA[i].clientHeight
      }
      for(var i=0;i<pA.length;i++){
        pLength+=pA[i].clientHeight
      }
      $('.real-info').animate({scrollTop:divHeight+pLength+divA.length+pA.length}, 500);
    },

    scrollThis(){
      var top = $(".real-info").scrollTop()
      var goal=$(".real-info p")

      for(var i=0;i<goal.length;i++){
        if(goal[i].offsetTop>top){
          this.headData.forEach((ele,index)=>{
            ele.isactive=false
          })
          console.log(i)
          this.$set(this.headData[i],"isactive",true)
          return;
        }
      }
    },
    getSelectData(){
      _g.apiPost('Studentinfo/getwhere').then(res=>{
        this.$set(this.searchData[1],'array',res.data.sta)
      })
    }
  },
  created() {
    this.path = _g.getRouterPath(this);
    if (this.path == "/student/add") {
      this.noEditing = false;
      this.btns = "2-6";
      this.title = "新增学生";
    } else {
      this.noEditing = true;
      this.btns = "2-5";
      this.title = "学生详细信息";
      this.search.id = _g.getRouterParams(this).id;
      this.getDetail();
    }

    if(bus._events.saveStudent!==null){
      bus.$off("saveStudent")
    }

    bus.$on("saveStudent", val => {
      if (val == "save") {
        this.save();
      } else if (val == "cancel") {
        if (this.path == "/student/add") {
          this.search = {};
          this.$router.go(-1);
        } else {
          // 编辑---取消
          this.noEditing = true;
          this.btns = "2-5";
          this.search = this.firstData;
        }
      } else if (val == "edit") {
        this.noEditing = false;
        this.btns = "2-6";
      } else if (val == "delete") {
        this.$store.state.dia.confirm.show = true;
        this.$store.state.dia.confirm.OK = this.delete;
      }
    });

    this.getSelectData()
  },
};
</script>
<style scoped>
.student-detail {
  height: calc(100vh - 131px);
}

.img-box {
  width: 140px;
  height: 135px;
  margin: 0 20px;
  background-color: #f0f0f0;
}
.img-box > img {
  width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.other-info {
  margin-top: 10px;
}
.other-info > .head {
  height: 45px;
  line-height: 45px;
  display: flex;
  background-color: rgba(243, 243, 243, 1);
  color: #999;
  
}

.other-info > .head > li {
  min-width: 100px;
  cursor: pointer;
  text-align: center;
  transition: all .8s;
}
.other-info > .head > li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #ccc;
  transition: all .8s;
}
.other-info > .head > li.active a {
  background-color: rgba(0, 121, 254, 1);
  color: #fff;
}
.real-info {
  height: calc(100% - 238px);
  background-color: #fff;
  overflow-y: auto;
  padding-bottom: 350px;
  box-sizing: border-box;
  position: relative;
  transition: all 2s;
}
.real-info > div {
  border-top: 1px solid #e4e4e4;
}
.real-info .special {
  border: none;
}
.real-info > .title {
  height: 50px;
  padding: 20px 0;
}
.real-info > .title > span {
  display: inline-block;
  line-height: 50px;
  width: 180px;
  background-color: #f9fafc;
  text-align: center;
  color: #999;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  position: relative;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
/* .real-info>.title>span::after{
  content: "";
  border: 25px solid transparent;
  border-left-color: rgba(243, 243, 243, 1);
  position: absolute;
  right: 0;
  transform: translate(100%);
  box-shadow: 0 0 0 1px #000
} */
.avatar-uploader {
  height: 100%;
  text-align: center;
  position: relative;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  width: 140px;
  height: 100%;
  line-height: 135px;
  text-align: center;
}
.avatar {
  max-height: 135px;
  width: 140px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
</style>